<template>
  <div class="date-list">
    <a-row>
      <a-col span="22">
        <a-row>
          <a-col :span="3" v-for="(day,index) in dateList" :key="index" class="datawidth" >
            <a-card @click="handleDate(day.date, index)">
              <div class="dates">
                <p>
                  <font :class="{daycolor:index === currentIndex && !isDateCheck}" class="basecolor">{{ index ===0?`今天 `:`${day.date}` }}</font>
                  <br/>
                  <span class="font14 color6">剩余{{ day.syfy }}间</span>
                </p>
                <div class="week-day">
                  {{ day.weekDay }}
                </div>

              </div>
              <div :class="{active:index === currentIndex && !isDateCheck}"></div>
            </a-card>
          </a-col>
          <a-col :span="3">
            <a-card>
              <div class="dates0 datespick" >
                <a-date-picker @change="selectDate" v-model="selDate" />
              </div>
              <div :class="{active:isDateCheck&&!isDateAreaShow}"></div>
            </a-card>
          </a-col>
        </a-row>
      </a-col>
      <a-col span="2" >
        <a-row>
          <a-col :span="24">
            <a-card>
              <div class="dates0 datesbut">
                <a-button type="primary" @click="handleReserve" class="primary_linear ydfy">{{ $t('dashboard.bookARoom') }}</a-button>
                <div class="range-date" v-if="isDateAreaShow" style="text-align:center">
                  <div class="delta"></div>
                  <a-form layout="inline" :form="dateAreaForm" @submit="handleDateAreaSubmit">
                    <a-form-item label="选择日期区间：">
                      <a-range-picker
                        :format="dateFormat"
                        :disabledDate="disabledDate"
                        v-decorator="[
                          'rangeDate'
                        ]"
                      />
                    </a-form-item>
                    <a-form-item>
                      <a-button type="primary" html-type="submit" class="primary_linear">
                        {{ $t('dashboard.queryHomes') }}
                      </a-button>
                    </a-form-item>
                    <a-form-item>
                      <a-button @click="handleCancel">
                        {{ $t('public.cancel') }}
                      </a-button>
                    </a-form-item>
                  </a-form>
                </div>
              </div>
              <!-- <div :class="{active:isDateAreaShow}"></div> -->
            </a-card>
          </a-col>
        </a-row>
      </a-col>
    </a-row>
  </div>
</template>
<script>
import moment from 'moment'
import { FULL_ORDER_STATUS, UN_IN_ORDER_STATUS } from '@/config/enum'
import { mapMutations } from 'vuex'
import { parseTime } from '@/utils/util'
export default {
  name: 'DateList',
  props: {
    dateList: {
      type: Array,
      default: function () {
        return []
      }
    }
  },
  data () {
    return {
      dateAreaForm: this.$form.createForm(this),
      dateFormat: 'YYYY-MM-DD',
      isDateAreaShow: false,
      isDateCheck: false,
      currentIndex: 0, // 当前选中栏
      selDate: null // 选中单个日期
    }
  },
  methods: {
    ...mapMutations([
      'setCurrentSelectedDate',
      'setLdsjSelectedDate'
    ]),
    moment,
    /**
     *点击时间栏
     *@param date 日期
     *@param index 当前索引
     */
    handleDate (date, index) {
      this.setCurrentSelectedDate(date)
      this.setLdsjSelectedDate('') // 除了预定查询时保留，其他删除
      this.selDate = null // 初始化单个日期
      this.isDateCheck = false // 设定日期下标状态
      this.isDateAreaShow = false // 设定区间日期下表状态
      this.$parent.changeDate(date)
      this.currentIndex = index
    },
    disabledDate (current) {
      return current && current < moment(new Date()).add(-1, 'days').endOf('day')
    },
    /**
     * 选择日期
     * @param value ant日期组件回调返回的值
     * @param mode 选中日期
     */
    selectDate (value, mode) {
      this.isDateAreaShow = false
      this.isDateCheck = true
      this.setLdsjSelectedDate('') // 除了预定查询时保留，其他删除
      if (mode) {
        this.setCurrentSelectedDate(mode)
        this.$parent.selectRangeDate(mode, FULL_ORDER_STATUS)
      } else {
        this.currentIndex = 0
        this.isDateCheck = false // 设定日期下标状态
        this.$parent.resetHouseOrderStatus()
        const curretDate = moment().format('YYYY-MM-DD')
        this.$parent.changeDate(curretDate)
        this.setCurrentSelectedDate(curretDate)
      }
      console.log(`mode`, mode)
    },
    /**
     * 显示日期选择
     */
    handleReserve () {
      this.isDateAreaShow = true
    },
    /**
     * 选择区间日期
     */
    handleDateAreaSubmit (e) {
      e.preventDefault()
      this.dateAreaForm.validateFields(async (err, value) => {
        if (!err) {
          console.log('received values of form:', value.rangeDate)
          if (value.rangeDate && value.rangeDate.length > 0) {
            const star = moment(value.rangeDate[0])
            const end = moment(value.rangeDate[1])
            if (star < end) {
              this.selDate = null // 初始化单个日期
              this.isDateCheck = true // 设定日期下标状态
              this.setCurrentSelectedDate(star.format('YYYY-MM-DD'))
              this.setLdsjSelectedDate(end.format('YYYY-MM-DD'))
              await this.$parent.selectRangeDate(value.rangeDate, UN_IN_ORDER_STATUS)
            } else {
              this.$notification['info']({
                message: '时间选择',
                description: '结束时间不能小于或等于开始时间',
                duration: 5
              })
            }
          } else {
            this.$notification['info']({
              message: '时间选择',
              description: '时间选择不能为空',
              duration: 5
            })
          }
        }
      })
    },
    handleCancel () {
      this.currentIndex = 0
      this.setLdsjSelectedDate('') // 除了预定查询时保留，其他删除
      this.isDateAreaShow = false
      this.isDateCheck = false // 设定日期下标状态
      this.selDate = null // 初始化单个日期
      this.$parent.resetHouseOrderStatus()
      const curretDate = parseTime(new Date(), `{yy}-{mm}-{dd}`)
      this.$parent.changeDate(curretDate)
    }
  }
}
</script>
<style lang="less" scoped>
.date-list:hover{
  cursor: pointer;
}
.date-list {
  height: 64px;
  min-width: 1440px;
  margin: -24px -24px 0px;
  background-color: #fff;
  .ant-card-bordered{border:none; }
  >.ant-row{padding:2px 0;}
  .datawidth{min-width:160px;}
  position: relative;
   .dates0 {
    padding: 15px 5px 5px 5px;
    margin: -24px -24px 0px -24px;
    height: 36px;
    text-align: left;
    position: relative;
   }
  .dates{
    padding: 5px;
    margin: -24px -24px 0px -24px;
    height: 36px;
    text-align: left;
    position: relative;
    p {
      .basecolor{
        font-size: 18px;
        color:#333;
        font-weight: 550;
      }
        padding: 0 11px;
        .basecolor.daycolor{
            font-size: 18px;
            font-weight: 550;
            color: #1890FF;
          }
    }
    .week-day {
      margin-right: 15px;
      line-height: 27px;
      overflow: hidden;
      text-align: center;
      background-color: #E8F4FF;
      border-radius: 27px;
      width: 27px;
      height: 27px;
      position: absolute;
      bottom: -14px;
      right: 0px;
    }
    p {
      line-height: 1.5rem;
    }
    p:after{
      content: '';
      background-color: #eee;
      width: 1px;
      line-height: 100%;
      position: absolute;
      display: inline-block;
      z-index: 2;
      height: 44px;
      right: -1px;
      top: 6px;
    }
  }
  .datesbut{text-align: right;}
   .datespick:after{
      content: '';
      background-color: #eee;
      width: 1px;
      line-height: 100%;
      position: absolute;
      display: inline-block;
      z-index: 2;
      height: 44px;
      right: -1px;
      top: 6px;
    }
  .datespick{padding-left: 16px;padding-right:12px;}
    .active {
      margin: -24px -24px 0px -24px;
      position:absolute;
      bottom: 0px;
      height: 3px;
      width: 100%;
      background-color:rgb(6, 158, 247);
      border-radius: 5px;
    }
    .ydfy{margin-right:48px;}
    .range-date {
      background-color: #fff;
      padding: 8px;
      position: absolute;
      top: 63px;
      right:38px;
      width:690px;
      border-radius: 5px;
      box-shadow:0px 0px 22px 0px rgba(116,116,116,0.5);
      z-index: 99;
      height:64px;
      padding-top:12px;
      .ant-form-inline .ant-form-item{margin-right:8px;margin-left:8px;
        /deep/.ant-input{
          padding-left:0px;
        }
      }
    }
    .delta{
      position:absolute;
      top:-11px;
      right:40px;
      z-index:999;
      width:30px;
      border-left:18px solid transparent;
      border-right:18px solid transparent;
      border-bottom:18px solid #fff;
      }
}
</style>
